<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
</head>

<style>
    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .pagination-container .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 0;
        border-radius: 4px;
    }

    .pagination-container .pagination-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pagination-container .pagination-list li {
        display: inline-block;
    }

    .pagination-container .pagination-list li a {
        color: #337ab7;
        padding: 6px 12px;
        margin: 0 3px;
        text-decoration: none;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .pagination-container .pagination-list li a:hover {
        background-color: #337ab7;
        color: #fff;
    }

    .pagination-container .pagination-list .active a {
        background-color: #337ab7;
        color: #fff;
    }
    /*.layui-nav-item.layui-this > a {*/
    /*    background-color: white;*/
    /*    color: black !important;*/
    /*    font-size: 16px !important;*/
    /*}*/
    .title {
        font-size: 24px;
        color: #333;
        text-align: center;
        margin-bottom: 20px;
    }
    .welcome-text{
        color:aquamarine;
        margin: 10px 10px 5px  10px;
    }
    .layui-table {
        margin: 0 auto;
        width: 80%;
        border-collapse: collapse;
    }

    .layui-table th,
    .layui-table td {
        padding: 10px;
        text-align: center;
        border: 1px solid #ddd;
    }

    .layui-table th {
        background-color: #f2f2f2;
        color: #333;
    }
    .layui-side {
        width: 200px;
    }

    .layui-side-scroll {
        height: calc(100% - 60px);
        overflow: auto;
    }

    .layui-nav-item {
        line-height: 50px;
    }

    .layui-body {
        padding: 20px;
    }

    .headpic{
        height: 100px;
        width: 100px;
        margin:0 50px;
    }

</style>


<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">职工后台管理系统</div>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div class="logo-wrapper">
                <div class="logo-img">
                    <img class="headpic" th:src="@{/picture/root.png}">
                </div>
                <div class="welcome-text" >
                    <p th:text="'欢迎您,尊贵的'+${session.root.name}+'！'"></p>
                </div>
            </div>
            <!-- 左侧导航区域 -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">员工信息</a>
                    <dl class="layui-nav-child">
                        <dd><a id="nav-manger" th:href="@{/manger}">员工薪酬信息</a></dd>
                        <dd><a id="nav-showdep" th:href="@{/showdep}">员工部门信息</a></dd>
                        <dd><a id="nav-selectEmp" th:href="@{/seletEmp}">工号查询</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a id="nav-showuser" th:href="@{/showuser}">用户信息</a>
                </li>
                <li class="layui-nav-item">
                    <a href="login.html">退出</a>
                </li>
            </ul>
        </div>
    </div>
        <div class="layui-body">

            <h2>查询单个员工</h2>
            <div>

                <form th:action="@{'/emp/showTopone1'}" method="post">
                    员工编号：<input class="form-control" type="text" th:value="${empno}" name="empno"/>
                    <button class="btn btn-primary btn-lg btn-block">查询</button>
                </form>
            </div>
            <div id="hide" th:if="${msg}">
                <p style="font-size: 50px;color: #aa4415", th:text="${msg}"></p>
            </div>

        </div>
    </div>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
<script>
    function hide(){
        document.getElementById('hide').style.display="none";
    }
    setTimeout(hide,2000);
    layui.use('element', function(){
        var element = layui.element;
        var $=layui.$;
        // 获取当前页面的 URL
        var currentUrl = window.location.href;
        console.log(currentUrl);
        // 根据当前 URL 判断并设置高亮
        if (currentUrl.includes('/manger')) {
            $('#nav-manger').addClass('layui-this');
        } else if (currentUrl.includes('/showdep')) {
            $('#nav-showdep').addClass('layui-this');
        } else if (currentUrl.includes('/seletEmp.html')) {
            $('#nav-selectEmp').addClass('layui-this');
        }else if (currentUrl.includes('/showuser')) {
            $('#nav-showuser').addClass('layui-this');
        }

        element.render('nav', 'test');
    });


</script>
</div>
</body>

</html>